<template>
  <div class="views-changdi-web-detail" style="margin-top: 20px">
    <div>
      <e-container>
        <div class="title-sn-title1">
          <div class="sn-title">
            <span> 场地详情 </span>
          </div>
          <div class="sn-content">
            <div class="">
              <div class="goods-info clearfix">
                <div class="gallery-list">
<!--                  <e-shangpinban :images="map.changditupian"></e-shangpinban>-->
                  <e-img  :src="map.changditupian" pb="80" :isScale="true" />
                </div>
                <div class="goods-right-content">
                  <h3 class="title" v-text="map.changdimingcheng"></h3>
                  <div class="descount">
                    <div>
                      <span class="name"> 场地价格： </span>
                      <span class="val"> {{ map.changdijiage }} </span>
                    </div>
                    <div>
                      <span class="name"> 类型： </span>
                      <span class="val">
                                                <e-select-view module="changdileixing" :value="map.leixing" select="id" show="leixingmingcheng"></e-select-view>
                                            </span>
                    </div>
                    <div>
                      <span class="name"> 每时段可预约数： </span>
                      <span class="val"> {{ map.meishiduankeyuyueshu }} </span>
                    </div>
                  </div>
                  <el-button type="primary" :icon="Plus" size="" v-if="$session.cx == '用户' " style="margin-right: 10px"
                             @click="$goto({path:'/changdiyuyue/add' , query:{meishiduankeyuyueshu:map.meishiduankeyuyueshu,id:map.id } })"
                  >场地预约</el-button>
                  <e-collect
                      module="shoucang"
                      :form="{biaoid:'xwid',biao:'biao',biaoti:'biaoti'}"
                      :biaoid="$route.query.id"
                      biao="changdi"
                      :biaoti="map.changdimingcheng"
                  >
                    <template #icon="{isCollect}">
                      <i class="fa" :class="isCollect?'fa-star' : 'fa-star-o'"></i>
                    </template>
                    <template #default="{isCollect}"> {{ isCollect ? '取消收藏' : '收藏' }} </template>
                  </e-collect>
                </div>
              </div>
<!--              <div class="goods-content" v-html="map.changdijianjie"></div>-->
            </div>

            <e-container>
              <el-tabs type="border-card">
                <el-tab-pane label="场地详情">
                  <div style="text-indent: 2em">
                    <div v-html="map.changdijianjie"></div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="评论区">
                  <e-comments
                      module="changdi"
                      :lists="comments"
                      :biaoti="map.changdimingcheng"
                      :is-comment="isCommit"
                      :commit-callback="commentCallback"
                      @success="getcommentsFunc"
                      user="username"
                      headimg="headimg"
                      :is-reply="true"
                      name="nickname"
                  >
                  </e-comments>
                </el-tab-pane>
              </el-tabs>
            </e-container>
          </div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/ajax/http";
import DB from "@/utils/db";
import EShangpinban from "@/components/shangpin/shangpinban.vue";
import EComments from "@/components/comments/comment";

import { ref, reactive, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { session } from "@/utils/utils";
import { extend } from "@/utils/extend";
import { useChangdiFindById, canChangdiFindById } from "@/module";

const route = useRoute();
const props = defineProps({
  id: {
    type: [Number, String],
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
});

/**
 * 获取详情页面的一行数据,当url参数id变更时，当url参数id变更时，自动更新map中的数据
 * @type {EChangdi}
 */
const map = useChangdiFindById(props.id);
watch(
    () => props.id,
    (id) => {
      canChangdiFindById(id).then((res) => {
        extend(map, res);
      });
    }
);
// end 获取详情页面的一行数据

// 获取评论信息
const isCommit = ref(true);
const commentCallback = (commit) => {
  // 评论提交的时候添加内容
};
const comments = ref([]);
const getcommentsFunc = async () => {
  comments.value = await DB.name("pinglun")
      .alias("pl")
      .joinLeft("yonghu u", "u.yonghuming=pl.pinglunren")
      .field("pl.*")
      .field("u.touxiang as headimg")
      .field("u.xingming as nickname")
      .field("u.yonghuming as username")
      .where("pl.biao", "changdi")
      .where("pl.biaoid", route.query.id)
      .order("pl.id desc")
      .select();
};
getcommentsFunc();
// end 获取评论信息
</script>

<style scoped lang="scss">
.views-changdi-web-detail {
}
</style>
